import { AlertDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Alert);

## Usage

<Demo data={AlertDemos.configurator} />

<StylesApiSelectors component="Alert" />

<Demo data={AlertDemos.stylesApi} />

## Accessibility

- Root element role set to `alert`
- `aria-describedby` set to body element id, `aria-labelledby` set to title element id if `title` is provided
- Set `closeButtonLabel` prop to make close button accessible

```tsx
import { Alert } from '@mantine/core';

function Invalid() {
  // -> not ok
  return <Alert withCloseButton />;
}

function Valid() {
  // -> ok
  return <Alert withCloseButton closeButtonLabel="Dismiss" />;
}

function AlsoValid() {
  // -> ok, without close button, closeButtonLabel is not needed
  return <Alert />;
}
```
